import { useState, useEffect } from 'react'
import { Region } from '@/app/types/region'

interface RegionFormProps {
  region?: Region | null
  parentCode?: string
  onSubmit: (region: Omit<Region, 'id' | 'createdAt' | 'updatedAt'> | Region) => void
  onClose: () => void
}

export default function RegionForm({ region, parentCode, onSubmit, onClose }: RegionFormProps) {
  const [formData, setFormData] = useState({
    code: '',
    name: '',
    level: 1,
    parentCode: parentCode || '',
    orderNum: 0,
    status: true
  })

  useEffect(() => {
    if (region) {
      setFormData({
        code: region.code,
        name: region.name,
        level: region.level,
        parentCode: region.parentCode || '',
        orderNum: region.orderNum,
        status: region.status
      })
    } else if (parentCode) {
      const level = Math.floor(parentCode.length / 3) + 2
      setFormData(prev => ({
        ...prev,
        parentCode,
        level
      }))
    }
  }, [region, parentCode])

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (region) {
      onSubmit({
        ...formData,
        id: region.id,
        createdAt: region.createdAt,
        updatedAt: region.updatedAt
      })
    } else {
      onSubmit(formData)
    }
  }

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center">
      <div className="bg-gray-800 p-6 rounded-lg w-full max-w-md">
        <h2 className="text-xl font-semibold mb-4 text-white">
          {region ? '编辑区划' : '添加区划'}
        </h2>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label className="block mb-1 text-gray-300">区划代码</label>
            <input
              type="text"
              value={formData.code}
              onChange={(e) => setFormData({ ...formData, code: e.target.value })}
              className="w-full p-2 border rounded bg-gray-700 text-white border-gray-600"
              required
            />
          </div>
          <div>
            <label className="block mb-1 text-gray-300">名称</label>
            <input
              type="text"
              value={formData.name}
              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
              className="w-full p-2 border rounded bg-gray-700 text-white border-gray-600"
              required
            />
          </div>
          <div>
            <label className="block mb-1 text-gray-300">排序号</label>
            <input
              type="number"
              value={formData.orderNum}
              onChange={(e) => setFormData({ ...formData, orderNum: parseInt(e.target.value) })}
              className="w-full p-2 border rounded bg-gray-700 text-white border-gray-600"
              required
            />
          </div>
          <div>
            <label className="block mb-1 text-gray-300">状态</label>
            <select
              value={formData.status.toString()}
              onChange={(e) => setFormData({ ...formData, status: e.target.value === 'true' })}
              className="w-full p-2 border rounded bg-gray-700 text-white border-gray-600"
            >
              <option value="true">启用</option>
              <option value="false">停用</option>
            </select>
          </div>
          <div className="flex justify-end space-x-2">
            <button
              type="button"
              onClick={onClose}
              className="px-4 py-2 border border-gray-600 rounded text-gray-300 hover:bg-gray-700"
            >
              取消
            </button>
            <button
              type="submit"
              className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
            >
              保存
            </button>
          </div>
        </form>
      </div>
    </div>
  )
} 